<template>
  <div class="z_top b-header-blur">
    <div class="b-header-mask-wrap">
      <div class="b-header-mask-bg" style="background-image: url('//i0.hdslb.com/bfs/archive/17759bd2d61eb97e992642f79a15ddabd015d0dc.png@.webp')"></div>
      <div class="b-header-mask"></div>
    </div>
    <header class="z_header">
      <nav class="z_top_nav">
        <ul>
          <li class="home">
            <a class="i-link" href="//www.bilibili.com/index.html" title="主站">
              主站
            </a>
          </li>
          <li class="hbili">
            <a class="i-link" href="http://h.bilibili.com/" title="画友">
              画友
            </a>
          </li>
          <li class="b-gc" hasframe="true">
            <a class="i-link" href="//game.bilibili.com/" title="游戏中心">
              游戏中心
            </a>
          </li>
          <li class="live" hasframe="true">
            <a class="i-link" target="_blank" href="//live.bilibili.com" title="直播">
              直播
            </a>
          </li>
          <li class="b-zb">
            <a class="i-link" target="_blank" href="//bmall.bilibili.com/#!/" title="周边">
              周边
            </a>
          </li>
          <li class="shouji">
            <a class="i-link" target="_blank" href="//game.bilibili.com/" title="移动端">
              移动端
            </a>
          </li>
          <li class="b-ml">
            <a class="i-link" target="_blank" href="//bml.bilibili.com" title="BML">
              BML
              <i class="new"></i>
            </a>
          </li>
        </ul>
      </nav>
      <div class="uns_box">
        <ul class="menu">
          <li class="u-i" id="i_menu_login_reg" guest="yes" style="display: list-item;">
            <a class="i-link login" href="https://account.bilibili.com/login">
              <span>登录</span>
            </a>
            <i class="s-line"></i>
            <a class="i-link reg" href="https://www.bilibili.com/register">
              <span>注册</span>
            </a>
          </li>
          <li class="u-i" id="i_menu_history_btn">
            <a class="i-link" href="//www.bilibili.com/account/history" target="_blank" @mouseenter="showHistoryList">
              历史
            </a>
            <HistoryList v-show="isShowHistoryList" @isShowHistoryList="showHistoryList"></HistoryList>
          </li>
          <li class="u-i b-post">
            <a class="i-link" href="//member.bilibili.com/v/video/submit.html" target="_blank" @mouseenter="showPostMenu">
              投 稿
            </a>
            <PostMenu v-show="isShowPostMenu" @isShowPostMenu="showPostMenu"></PostMenu>
          </li>
        </ul>
      </div>
    </header>
  </div>
</template>

<script>
import HistoryList from './HistoryList.vue';
import PostMenu from './PostMenu.vue';
export default {
  name: 'theader',
  components: {
    PostMenu,
    HistoryList
  },
  data () {
    return {
      isShowPostMenu: false,
      isShowHistoryList: false
    };
  },
  methods: {
    showPostMenu () {
      this.isShowHistoryList = false;
      this.isShowPostMenu = !this.isShowPostMenu;
    },
    showHistoryList () {
      this.isShowPostMenu = false;
      this.isShowHistoryList = !this.isShowHistoryList;
    }
  }
};
</script>

<style lang="stylus" scoped>
  .z_top
    height 42px
    background #fff
    box-shadow rgba(0, 0, 0, 0.1) 0 1px 2px
    position relative
    top 0
    left 0
    width 100%
    z-index 10000
    font-family "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif
    color #222
    &.b-header-blur
      background-color transparent
      .b-header-mask-wrap
        display block
        .b-header-mask
          background-color rgba(0, 0, 0, 0.4)
    .z_header
      display block
      margin 0 auto
      position relative
      text-align left
      z-index 10000
      width 980px
      zoom 1
      &:after
        content ""
        display block
        visibility hidden
        height 0
        clear both
        font-size 0
    .z_top_nav
      float left
      height 42px
      font-size 12px
      ul
        zoom 1
        li
          float left
          text-align center
          line-height 42px
          position relative
          a
            &:hover
              background #d7e9f8
          &.home
            margin-left -10px
            background-image: url(../../../static/images/icons.d895b84.png);
            background-repeat no-repeat
            background-position -845px -74px
            width 50px
            height 42px
            padding 0 0 0 20px
          .new
            position absolute
            top 10px
            right -8px
            color #f25d8e
            background: url(../../../static/images/icons.d895b84.png) no-repeat;
            width 22px
            height 10px
            background-position -851px -412px
    .i-link
      display block
      color #fff
      font-size 12px
      padding 0 11px
      transition 0.15s background-color
      height 100%
      &:hover
        background #536895
  .uns_box
    float right
    font-size 12px
    ul
      .u-i
        float left
        text-align center
        height 42px
        line-height 42px
        position relative
      #i_menu_login_reg
        padding 0 10px
        .i-link
          color #fff
          padding 0 10px
          display inline-block
        .s-line
          display inline-block
          border-left 1px solid #222
          height 12px
          margin-top 16px
          vertical-align top
          border-color #fff
      .b-post
        .i-link
          margin 0px
          padding 0px
          width 58px
          position relative
          z-index 10
          background url(../../assets/images/contribute.png) center center no-repeat
          height 48px
          border-radius 0 0 5px 5px
          color #fff !important
  .b-header-mask-wrap,
    display none
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    overflow hidden
    background-color #fff
    .b-header-mask
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      background-color #fff
      filter \alpha(opacity=40) \9
      background-color: rgba(255, 255, 255, 0.4);
      z-index: 100;
  .b-header-mask-bg
    position absolute
    height 62px
    padding 0 20px
    top -10px
    left -20px
    width 100%
    filter unquote('progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false)')
    -ms-filter: blur(5px);
    filter blur(5px)
    z-index 50
    background-position center 0px !important
    background-repeat no-repeat



</style>
